<template>
    <div class="app-container">
        <el-form :model="searchdata" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="姓名" prop="wtdName">
                <el-input v-model="searchdata.wtdName" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="状态" prop="wtdStatus">
                <el-select v-model="searchdata.wtdStatus" placeholder="用户状态" clearable style="width: 150px">
                    <el-option v-for="dict in wtdStatus" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="提现时间">
                <el-date-picker v-model="searchdata.startTime" type="date" value-format="timestamp"
                    :picker-options="startDatePicker" placeholder="开始时间" style="width: 150px">
                </el-date-picker>
                <el-date-picker v-model="endTimes" type="date" value-format="timestamp" :picker-options="endDatePicker"
                    placeholder="结束时间" style="width: 150px">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tixianList">
            <el-table-column label="姓名" align="center" prop="wtdName" />
            <el-table-column label="提现时间" align="center" prop="wtdTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.wtdTime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="提现金额" align="center" prop="takeMoney" />
            <el-table-column label="当前金额" align="center" prop="puHaveMoney" />
            <el-table-column label="冻结金额" align="center" prop="puFieezeMoney" />
            <el-table-column label="银行卡号" align="center" prop="wtdCardId" />
            <el-table-column label="开户行" align="center" prop="wtdAddress" />
            <el-table-column label="办卡支行" align="center" prop="wtdAddressMessage" />
            <!-- 0--审核通过  1---待审核 2---已驳回 -->
            <el-table-column label="状态" align="center" prop="wtdStatus">
                <template slot-scope="scope">
                    <span v-if="scope.row.wtdStatus == 0">审核通过</span>
                    <span v-else-if="scope.row.wtdStatus == 1">待审核</span>
                    <span v-else-if="scope.row.wtdStatus == 2">已驳回</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="shenhe(scope.row)"
                        v-if="scope.row.wtdStatus == 1">审核</el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" v-if="scope.row.wtdStatus == 2"
                        @click="chakan(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="searchdata.pageNum" :limit.sync="searchdata.pageSize"
            @pagination="getList" />
        <!-- 审核详情 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closeDialog">
            <el-form :model="form" ref="form" style="height: 100px" :rules="rules" size="small" :inline="true"
                label-width="150px">
                <el-form-item label="退回审核" style="width:500px">
                    <template>
                        <el-radio-group v-model="form.type">
                            <el-radio :label="0">同意</el-radio>
                            <el-radio :label="1">驳回</el-radio>
                        </el-radio-group>
                    </template>
                </el-form-item>
                <el-form-item label="驳回原因" prop="wtdFailCause" v-if="form.type == '1'">
                    <el-input v-model="form.wtdFailCause" placeholder="请输入驳回原因" type="textarea" clearable
                        style="width: 180px">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" :disabled="lock" @click="submitshenhe">提交审核</el-button>
            </div>
        </el-dialog>
        <!-- 查看详情 -->
        <el-dialog :title="title1" :visible.sync="open1" width="800px" append-to-body @close="closeDialog">
            <el-form :model="form" ref="form" :rules="rules" size="small" :inline="true" label-width="150px"
                :disabled="edit">
                <el-form-item label="驳回原因" prop="wtdFailCause">
                    <el-input v-model="form.wtdFailCause" placeholder="请输入驳回原因" type="textarea" clearable
                        style="width: 180px">
                    </el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { selectTXSHAll, insertproddepos, selectshenhechakanOne } from "@/api/puser/process.js";
import { title } from "process";
export default {
    name:'process',
    data() {
        return {
            lock: false,
            endTimes: '',
            showSearch: true,
            searchdata: {
                wtdName: '',
                wtdStatus: '',
                startTime: '',
                endTime: '',
                pageNum: 1,
                pageSize: 10,
            },
            // 员工状态
            wtdStatus: [{
                value: '0',
                label: '审核通过'
            }, {
                value: '1',
                label: '待审核'
            }, {
                value: '2',
                label: '已驳回'
            }],
            edit: true,
            tixianList: [],
            loading: false,
            open: false,
            open1: false,
            title: '',
            title1: '',
            total: 0,
            form: {
                type: 0,
                wtdUserId: '',
                takeMoney: '',
                wtdWay: '',
                wtdFailCause: '',
                wtdName: '',
                wtdCardId: '',
                wtdAddress: '',
                wtdAddressMessage: '',
                id: ''
            },
            date: {
                wtdUserId: '',
                wtdTime: '',
                takeMoney: '',
                wtdCardId: '',
            },
            rules: {
                wtdFailCause: [{ required: true, message: "驳回原因不能为空", trigger: "blur" }]
            },
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
        }
    },
    created() {
        this.getList();
    },
    methods: {
        closeDialog() {
            this.form = {
                type: 0,
                wtdUserId: '',
                takeMoney: '',
                wtdFailCause: '',
                wtdName: '',
                wtdCardId: '',
                wtdAddress: '',
                wtdAddressMessage: '',
            }
        },
        async getList() {
            let res = await selectTXSHAll(this.searchdata);
            if (res.code == 200) {
                this.tixianList = res.rows;
                this.total = res.total;
            }
        },
        // 审核
        shenhe(row) {
            this.open = true;
            this.title = "审核";
            this.form.wtdUserId = row.wtdUserId;
            this.form.takeMoney = row.takeMoney;
            this.form.wtdName = row.wtdName;
            this.form.wtdCardId = row.wtdCardId;
            this.form.wtdAddress = row.wtdAddress;
            this.form.wtdAddressMessage = row.wtdAddressMessage;
            this.form.id = row.id;
        },
        submitshenhe() {
            this.lock = true;
            this.$refs["form"].validate(valid => {
                if (valid) {
                    insertproddepos(this.form).then(response => {
                        if (response.code == 200) {
                            this.lock=false;
                            this.$modal.msgSuccess("审核成功");
                            this.getList();
                            this.open = false;
                            this.closeDialog();
                        }else{
                            this.lock=fasle;
                            this.$modal.msgError("审核失败");
                        }

                    })
                }
            })
        },
        // 查看
        chakan(row) {
            this.date.wtdUserId = row.wtdUserId;
            this.date.wtdTime = row.wtdTime;
            this.date.takeMoney = row.takeMoney;
            this.date.wtdCardId = row.wtdCardId;
            this.open1 = true;
            this.title1 = "查看驳回原因";
            selectshenhechakanOne(this.date).then(response => {
                if (response.data.code == 200) {
                    if (response.data.msg == '暂无数据') {
                        this.form.wtdFailCause = "暂无"
                    } else {
                        this.form.wtdFailCause = response.data.data.wtdFailCause;
                    }
                }
            })
        },
        // 搜索
        handleQuery() {
            if (this.searchdata.startTime == '' && this.searchdata.endTime == "") {
                selectTXSHAll(this.searchdata).then(response => {
                    if (response.code == 200) {
                        this.tixianList = response.rows;
                        this.total = response.total;
                    }
                })
            } else if (this.searchdata.startTime == "" && this.endTimes != '') {
                this.$modal.msgError("请输入开始时间");
            } else if (this.searchdata.startTime != '' && this.endTimes == '') {
                this.$modal.msgError("请输入结束时间");
            } else if (this.searchdata.startTime != '' && this.endTimes != '' && this.searchdata.startTime > this.endTimes) {
                this.$modal.msgError("结束时间必须大于开始时间");
            } else if (this.searchdata.startTime != '' && this.endTimes != '' && this.searchdata.startTime < this.endTimes) {
                this.searchdata.endTime = this.endTimes + 24 * 60 * 60 * 1000 - 1;
                selectTXSHAll(this.searchdata).then(response => {
                    if (response.code == 200) {
                        this.tixianList = response.rows;
                        this.total = response.total;
                    }
                })
            } else if (this.queryParams.startTime == this.queryParams.endTime) {
                this.$modal.msgError("结束时间必须大于开始时间");
            }
        },
        resetQuery() {
            this.searchdata = {
                wtdName: '',
                wtdStatus: '',
                startTime: '',
                endTime: '',
                pageNum: 1,
                pageSize: 10,
            },
                this.endTimes = "";
            this.getList();
        },
        // 验证搜索框日期
        beginDate() {
            const self = this;
            return {
                disabledDate(time) {
                    //           debugger;
                    if (self.endTime) {
                        //如果结束时间不为空，则小于结束时间
                        return new Date(self.endTime).getTime() < time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        processDate() {
            const self = this;
            return {
                disabledDate(time) {
                    if (self.startTime) {
                        //如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.startTime).getTime() > time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
    }
}
</script>